<template>
  <div class="addClinic">
    <!-- 医生基本信息 -->
    <div>
      <div class="addClinicTitle">代理商工商及财务信息</div>

      <div style="width: 100%; padding-top: 30px">
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">公司名称</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入工商注册公司名称"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">工商注册地址</div>
            <el-input
              v-model="sendMsg.doctorName"
              placeholder="请输入工商注册地址"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">统一社会信用代码</div>
            <el-input
              v-model="sendMsg.address"
              type="text"
              placeholder="请输入工商注册编号"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">工商注册法人</div>
            <el-input
              v-model="sendMsg.mobile"
              placeholder="请输入工商注册法人姓名"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">开户行</div>
            <el-input
              v-model="sendMsg.mobile"
              placeholder="请输入工商注册名称"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">开户行账号</div>
            <el-input
              v-model="sendMsg.mobile"
              placeholder="请输入开户行账号"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexTop">
            <!-- 上传头像啊 -->
            <div class="inputTitle">工商营业执照</div>
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload"
              name="file"
              :data="dataObj"
            >
              <img v-if="sendMsg.avatar" :src="sendMsg.avatar" class="avatar" />
              <div v-else>
                <img
                  src="../../../../assets/images/girl.svg"
                  alt=""
                  style="width: 100px; margin-bottom: 16px"
                />
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="addClinicTitle">签约合同及套餐授权</div>
      <div style="width: 100%; padding-top: 30px">
        <div class="flexSpace">
          <div class="">
            <div class="flexLeft">
              <div class="inputTitle">是否签订合同</div>
              <el-input
                v-model="sendMsg.proRuleId"
                placeholder="请输入工商注册公司名称"
              ></el-input>
            </div>
            <div class="flexLeft">
              <div class="inputTitle">合同编号</div>
              <el-input
                v-model="sendMsg.proRuleId"
                placeholder="请输入合同编号"
              ></el-input>
            </div>
            <div class="flexLeft">
              <div class="inputTitle">合同期限</div>
              <el-input
                v-model="sendMsg.proRuleId"
                placeholder="请输入工商注册公司名称"
              ></el-input>
            </div>
            <div class="flexLeft">
              <div class="inputTitle">授权套餐</div>
              <el-input
                v-model="sendMsg.proRuleId"
                placeholder="请输入工商注册公司名称"
              ></el-input>
            </div>
          </div>
          <div style="padding-left: 40px">
            <p>
              1、根据套餐管理里新增的套餐，在下拉框中回显进行多选，并
              且可以进行选择
            </p>
            <p>2、目前选择套餐只做记录，后期会控制矫治器的数量</p>
          </div>
        </div>
        <div style="padding: 20px 0">
          <div class="">已选择的套餐</div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="套餐名称" align="center">
            </el-table-column>
            <el-table-column prop="name" label="描述" align="center">
            </el-table-column>
            <el-table-column prop="address" align="center" label="套餐价格">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="出库单中显示金额"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">矫治器补做</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入工商注册公司名称"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">报告收费</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入工商注册公司名称"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">结算方式</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入工商注册公司名称"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexTop" style="width: 273px">
            <div class="inputTitle">电子合同</div>
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload"
              name="file"
              :data="dataObj"
            >
              <div>
                <el-link
                  style="white-space: nowrap;"
                  type="primary"
                  class="dialogBtn"
                  round
                >点击上传电子合同</el-link>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="addClinicTitle">发票信息</div>
      <div style="width: 100%; padding-top: 30px">
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTop" style="width: 160px">
              <el-button style="margin-right: 12px">匹配发票信息</el-button>
            </div>

            已匹配北京欢乐口腔发票信息
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">发票类型</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入工商注册公司名称"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">发票公司名称</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票公司名称"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">税务登记证号</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入税务登记证号"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">发票项目</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票项目"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">发票备注</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票备注"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">经营地址</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入经营地址"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">经营电话</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入经营电话"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">开户行</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入开户行"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">账 号</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入账      号"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">发票寄送地址</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票寄送地址"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">发票收件人姓名</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票收件人姓名"
            ></el-input>
          </div>
        </div>
        <div class="flexSpace">
          <div class="flexLeft">
            <div class="inputTitle">发票收件人电话</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入发票收件人电话"
            ></el-input>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">电子发票接收邮箱</div>
            <el-input
              v-model="sendMsg.proRuleId"
              placeholder="请输入电子发票接收邮箱"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入请求

// import { getUUID } from '@/utils/index';
export default {
  props: [],
  data() {
    return {
      imgUrl: '',
      // 上传的地址
      uploadImgUrl: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '1',
          label: '北京烤鸭'
        },
        {
          value: '2',
          label: '北京烤鸭'
        },
        {
          value: '3',
          label: '北京烤鸭'
        },
        {
          value: '4',
          label: '北京烤鸭'
        },
        {
          value: '5',
          label: '北京烤鸭'
        },
        {
          value: '6',
          label: '北京烤鸭'
        },
        {
          value: '7',
          label: '北京烤鸭'
        },
        {
          value: '8',
          label: '北京烤鸭'
        },
        {
          value: '9',
          label: '北京烤鸭'
        }
      ],
      value: '',
      input: '',
      sendMsg: {
        avatar: '',
        doctorName: '',
        level: '',
        gender: '',
        mobile: '',
        packageRuleId: '',
        practiceYear: '',
        proRuleId: '',
        professional: '',
        receiveType: '',
        tags: [],
        typeCode: '',
        clinicIdList: []
      },
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      // 诊所下拉数据
      clinicList: [],
      // 已选择诊所
      chooseClinicList: ['{}'],
      tagStr: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },

  mounted() {
    // 获取诊所列表
  },
  methods: {
    // 上传前获取阿里云权限
    beforeUpload(file) {
      // const self = this;
      console.log('调用a');
      return new Promise((resolve, reject) => {
        // getAliToken()
        //   .then((response) => {
        //     self.uploadImgUrl = response.host;
        //     console.log(file.name, getUUID());
        //     self.dataObj.policy = response.policy;
        //     self.dataObj.signature = response.signature;
        //     self.dataObj.ossaccessKeyId = response.accessid;
        //     self.dataObj.key = response.dir + getUUID() + `_${file.name}`;
        //     self.dataObj.dir = response.dir;
        //     self.dataObj.host = response.host;
        //     console.log(self.dataObj);
        //     resolve(true);
        //   })
        //   .catch((err) => {
        //     console.warn(err);
        //     // reject(false);

        //   });
      });
    },
    // 上传成功钩子
    handleAvatarSuccess(e) {
      console.log(e);
    },
    // 赋值
    getsendMsg(row) {
      this.sendMsg = row;
    }
  }
};
</script>

<style scoped lang='scss'>
// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.flexSpace {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexLeft {
  text-align: end;
  display: flex;
  padding-bottom: 12px;
  align-items: center;
  .inputTitle {
    width: 240px;
  }
}
.flexTop {
  display: flex;
  text-align: end;
  padding-bottom: 12px;
  align-items: top;
  .inputTitle {
    width: 160px;
  }
}
.addClinic {
  font-size: 14px;

  //   表单标题
  .inputTitle {
    white-space: nowrap;
    margin-right: 12px;
  }
  .inputTitle::before {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ea5f5f;
    border-radius: 4px;
    margin: 0 4px 2px 0;
  }
  // 不带点的标题
  .inputTitleNopoint {
    white-space: nowrap;
    padding-right: 32px;
    padding: 0 32px 0 12px;
  }
}
</style>
